<template>
    <el-container>
        <el-main>
            <el-row :gutter="20" class="stats-cards">
                <el-col :span="8">
                    <el-card>
                        <p>用户总数</p>
                        <h3>{{ totalUsers }}</h3>
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card>
                        <p>今日新增用户</p>
                        <h3>{{ newUsers }}</h3>
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card>
                        <p>在线用户</p>
                        <h3>{{ onlineUsers }}</h3>
                    </el-card>
                </el-col>
            </el-row>

            <el-row class="controls">
                <el-col>
                    <el-radio-group v-model="chartTimeRange" @change="updateTimeRange">
                        <el-radio-button label="month">本月数据</el-radio-button>
                        <el-radio-button label="year">全年数据</el-radio-button>
                    </el-radio-group>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="12">
                    <el-card>
                        <div id="chartTotalUser" class="chart"></div>
                    </el-card>
                </el-col>
                <el-col :span="12">
                    <el-card>
                        <div id="chartOnlineUsers" class="chart"></div>
                    </el-card>
                </el-col>
            </el-row>
        </el-main>
    </el-container>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';


const totalUsers = ref<number>(0);
const newUsers = ref<number>(0);
const onlineUsers = ref<number>(0);

const userGrowthTrend = ref<Array<{ date: string; count: number }>>([]);
const onlineUserStats = ref<Array<{ date: string; count: number }>>([]);
const filterUserGrowthTrend = ref<Array<{ date: string; count: number }>>([]);
const filterOnlineUserStats = ref<Array<{ date: string; count: number }>>([]);

const chartTimeRange = ref<'month' | 'year'>('month');


const fetchOverData = () => {
    // 给后端发送Get请求，附带参数month还是year ,再交给后端判断，返回data
    const data = {
        totalUsers: 15000,
        newUsers: 750,
        onlineUsers: 6500
    }
    totalUsers.value = data.totalUsers;
    newUsers.value = data.newUsers;
    onlineUsers.value = data.onlineUsers;
}




const fetchChartData = async (timeRange: 'month' | 'year') => {
    try {
        // 给后端发送Get请求，附带参数month还是year ,再交给后端判断，返回data
        const data = {
            userGrowthTrend: [
                { date: '2023-01-01', count: 50 },
                { date: '2023-01-02', count: 60 },
                { date: '2023-01-03', count: 70 },
                { date: '2023-02-01', count: 120 },
                { date: '2023-02-02', count: 130 },
                { date: '2023-03-01', count: 150 },
                { date: '2023-03-02', count: 160 },
                { date: '2023-04-01', count: 180 },
                { date: '2023-04-02', count: 200 },
                { date: '2023-05-01', count: 210 },
                { date: '2023-06-01', count: 230 },
                { date: '2023-07-01', count: 250 },
                { date: '2023-08-01', count: 280 },
                { date: '2023-09-01', count: 300 },
                { date: '2023-10-01', count: 320 },
                { date: '2023-11-01', count: 340 },
                { date: '2023-12-01', count: 360 },
                { date: '2024-01-01', count: 380 },
                { date: '2024-02-01', count: 400 },
                { date: '2024-03-01', count: 420 },
                { date: '2024-04-01', count: 440 },
                { date: '2024-05-01', count: 460 },
                { date: '2024-06-01', count: 480 },
                { date: '2024-07-01', count: 500 },
                { date: '2024-08-01', count: 520 },
                { date: '2024-09-01', count: 540 },
                { date: '2024-10-01', count: 560 },
                { date: '2024-11-01', count: 580 },
                { date: '2024-12-01', count: 600 },
                { date: '2024-12-02', count: 610 },
                { date: '2024-12-03', count: 620 },
                { date: '2024-12-04', count: 630 },
                { date: '2024-12-05', count: 640 },
                { date: '2024-12-06', count: 650 },
                // 添加更多数据...
            ],
            onlineUserStats: [
                { date: '2023-01-01', count: 200 },
                { date: '2023-01-02', count: 210 },
                { date: '2023-01-03', count: 220 },
                { date: '2023-02-01', count: 300 },
                { date: '2023-02-02', count: 310 },
                { date: '2023-03-01', count: 350 },
                { date: '2023-03-02', count: 370 },
                { date: '2023-04-01', count: 380 },
                { date: '2023-04-02', count: 390 },
                { date: '2023-05-01', count: 400 },
                { date: '2023-06-01', count: 420 },
                { date: '2023-07-01', count: 430 },
                { date: '2023-08-01', count: 450 },
                { date: '2023-09-01', count: 470 },
                { date: '2023-10-01', count: 480 },
                { date: '2023-11-01', count: 490 },
                { date: '2023-12-01', count: 500 },
                { date: '2024-01-01', count: 510 },
                { date: '2024-02-01', count: 520 },
                { date: '2024-03-01', count: 530 },
                { date: '2024-04-01', count: 540 },
                { date: '2024-05-01', count: 550 },
                { date: '2024-06-01', count: 560 },
                { date: '2024-07-01', count: 570 },
                { date: '2024-08-01', count: 580 },
                { date: '2024-09-01', count: 590 },
                { date: '2024-10-01', count: 600 },
                { date: '2024-11-01', count: 610 },
                { date: '2024-12-01', count: 620 },
                { date: '2024-12-02', count: 630 },
                { date: '2024-12-03', count: 640 },
                { date: '2024-12-04', count: 650 },
                { date: '2024-12-05', count: 660 },
                { date: '2024-12-06', count: 670 },
                // 添加更多数据...
            ],
        };


        userGrowthTrend.value = data.userGrowthTrend;
        onlineUserStats.value = data.onlineUserStats;
        updateTimeRange();
        initCharts();
    } catch (error) {
        console.error('数据获取失败', error);
    }
};


const initCharts = () => {
    // 用户增长趋势
    const chartDomTotal = document.getElementById('chartTotalUser') as HTMLElement;
    const chartTotal = echarts.init(chartDomTotal);
    const totalUserOption: echarts.EChartsOption = {
        title: { text: '用户增长趋势', left: 'center' },
        tooltip: { trigger: 'axis' },
        xAxis: { type: 'category', data: filterUserGrowthTrend.value.map((item) => item.date) },
        yAxis: { type: 'value' },
        series: [
            {
                name: '新增用户',
                type: 'line',
                data: filterUserGrowthTrend.value.map((item) => item.count),
                smooth: true,
                lineStyle: { color: '#409EFF' },
            },
        ],
    };
    chartTotal.setOption(totalUserOption);

    // 在线用户统计
    const chartDomOnline = document.getElementById('chartOnlineUsers') as HTMLElement;
    const chartOnline = echarts.init(chartDomOnline);
    const onlineUserOption: echarts.EChartsOption = {
        title: { text: '在线用户统计', left: 'center' },
        tooltip: { trigger: 'axis' },
        xAxis: { type: 'category', data: filterOnlineUserStats.value.map((item) => item.date) },
        yAxis: { type: 'value' },
        series: [
            {
                name: '在线用户',
                type: 'bar',
                data: filterOnlineUserStats.value.map((item) => item.count),
                itemStyle: { color: '#67C23A' },
            },
        ],
    };
    chartOnline.setOption(onlineUserOption);
};

const updateTimeRange = () => {
    const currentDate = new Date();
    const currentYear = currentDate.getFullYear();
    const currentMonth = currentDate.getMonth();

    const filterByTimeRange = (data: Array<{ date: string, count: number }>, range: 'month' | 'year') => {
        if (range === 'year') {
            // 如果是年数据，按月份聚合数据
            const monthlyData = new Array(12).fill(0).map((_, month) => {
                return data
                    .filter(item => new Date(item.date).getFullYear() === currentYear && new Date(item.date).getMonth() === month)
                    .reduce((sum, item) => sum + item.count, 0);
            });
            return monthlyData.map((count, index) => ({
                date: `${currentYear}-${String(index + 1).padStart(2, '0')}`,
                count
            }));
        } else {
            // 如果是月数据，返回当前月的所有天的数据
            return data.filter(item => {
                const itemDate = new Date(item.date);
                return itemDate.getFullYear() === currentYear && itemDate.getMonth() === currentMonth;
            });
        }
    };

    // 根据时间范围过滤数据
    const updatedUserGrowthTrend = filterByTimeRange(userGrowthTrend.value, chartTimeRange.value);
    const updatedOnlineUserStats = filterByTimeRange(onlineUserStats.value, chartTimeRange.value);

    // 更新过滤后的数据
    filterUserGrowthTrend.value = updatedUserGrowthTrend;
    filterOnlineUserStats.value = updatedOnlineUserStats;

    // 更新图表
    initCharts();
};



onMounted(() => {
    fetchOverData();
    fetchChartData(chartTimeRange.value);
});
</script>

<style scoped>
.stats-cards {
    margin-bottom: 20px;
}

.controls {
    margin-bottom: 20px;
}

.chart {
    width: 100%;
    height: 400px;
}

.el-card {
    text-align: center;
    padding: 20px 0;
    font-size: 16px;
}

.el-card h3 {
    font-size: 28px;
    margin: 10px 0 0;
}
</style>
